<template>
	<view>
		<view class="mask" @click="cancel"></view>
		<!-- 注册成功 -->
		<view class="model" v-if="modelType == 1">
			<view class="titleTip" v-if="!logo">注册成功</view>
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">账号可用于下次登录</view>
			<view class="btns">
				<view class="btn-cancel" @click="cancel">取消</view>
				<view class="btn-yes thmeBg" @click="backPage" :style="{ '--color': color }">返回</view>
			</view>
		</view>
		<!-- 判断vid -->
		<view class="model" v-if="modelType == 2" style="min-height: 494rpx">
			<view class="titleTip" v-if="!logo">请先登录/注册</view>
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">会员登录，获取更多优惠</view>
			<view class="btns">
				<!-- #ifdef H5 -->
				<button class="btn-cancel" data-type="1" @click="toRegister">登录</button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<button class="btn-cancel" v-if="!noAuth" @click="getuserinfos_">获取授权</button>
				<!-- <button class="btn-cancel" v-if='!noAuth' open-type='getUserInfo' @getuserinfo='getuserinfo_'>获取授权</button> -->
				<button
					class="btn-yes thmeBg"
					:style="{ '--color': color }"
					style="color: white"
					type="default"
					v-if="noAuth"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumberHandler"
				>
					快捷登录
				</button>

				<!-- #endif -->

				<!-- #ifdef MP-TOUTIAO || APP-PLUS -->
				<button class="btn-cancel thmeColor" data-type="1" @click="toRegister" :style="{ '--color': color }">立即登录</button>
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<view class="btn-yes thmeBg" :style="{ '--color': color }" data-type="0" @click="toRegister">手动注册</view>
				<!-- #endif -->
			</view>
		</view>

		<view class="model" v-if="modelType == 100" style="min-height: 494rpx">
			<view class="logo">
				<image :src="imgUrl + logo" mode="widthFix"></image>
			</view>
			<view class="msgTip">会员登录，获取更多优惠</view>
			<view class="btns">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <button class="btn-yes thmeBg" :style="{'--color': color}" style="color: white;" type="default" v-if='noAuth' open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">快捷登录</button> -->
				<button class="btn-cancel" @click="getuserinfos_">获取授权</button>
				<!-- #endif -->
			</view>
		</view>

		<!-- 通用版 -->
		<view class="model" v-if="modelType == 99">
			<view class="titleTip">{{ title }}</view>
			<view class="msgTip">{{ msg }}</view>
			<view class="btns">
				<view class="btn-cancel" v-if="btn1" @click="cancel">{{ btn1 }}</view>
				<view class="btn-cancel" v-if="btn3" @click="backHome">{{ btn3 }}</view>
				<view class="btn-yes thmeBg" :style="{ '--color': color }" @click="certain">{{ btn2 }}</view>
			</view>
		</view>

		<Coupon v-if="CouponShow && couponArry" :couponArry="couponArry" @closeFunc="CouponShow = false"></Coupon>
	</view>
</template>

<script>
var that;
import API from '../../api/index.js';
import Coupon from '../Coupons.vue';
export default {
	/**
	 * goHome登录成功后是否返回首页  0不返回  1/null返回
	 * btn1:取消按钮文字
	 * btn2：确定按钮文字
	 * btn3：返回首页文字
	 * msg：提示文字
	 * title: 标题
	 * **/
	props: ['type', 'title', 'msg', 'goHome', 'btn1', 'btn2', 'btn3', 'btn1_url', 'btn2_url', 'jump'],
	data() {
		return {
			color: getApp().globalData.color,
			modelType: this.type, // 弹窗类型
			openid: '',
			userinfo: '',
			noAuth: null, // 用户未授权 true已授权 false未授权
			logo: '',
			imgUrl: this.imgUrl,
			CouponShow: false,
			couponArry: ''
		};
	},
	components: {
		Coupon
	},
	watch: {
		type(e) {
			this.modelType = e;
		}
	},
	created() {
		that = this;
		if (that.type == 1 || that.type == 2 || that.type == 100) {
			that.logo = uni.getStorageSync('startUp').logo_img;
		}
		if (that.type == 2) {
			that.openid = uni.getStorageSync('openid');
			that.userinfo = uni.getStorageSync('userinfo');
			if (!that.openid || !that.userinfo || that.userinfo.nickName == '微信用户') {
				API.user.getOpenid().then((openid) => {
					that.openid = openid;
				});
			} else {
				that.noAuth_type = true;
			}
		}
	},
	methods: {
		backPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		cancel() {
			//取消

			if (this.jump == 'jumpRoute') {
				console.log(this.btn1_url);
				if (this.btn1_url.indexOf('/pages/tabbar/tabbar') != -1) {
					this.$common.backHome();
					return;
				}
				if (this.btn1_url.indexOf('close') != -1) {
					this.$emit('cancelFunc');
				}
			} else {
				// #ifdef H5
				if (this.btn1_url.indexOf('http') != -1) {
					window.location.href(this.btn1_url);
				} else {
					this.$emit('cancelFunc');
				}
				// #endif
			}
		},
		certain() {
			//确定
			if (this.btn2_url.indexOf('close') != -1) {
				this.$emit('cancelFunc');
			} else {
				uni.navigateTo({
					url: this.btn2_url
				});
			}

			if (this.jump == 'jumpRoute') {
				if (this.btn2_url.indexOf('/pages/tabbar/tabbar') != -1) {
					this.$common.backHome();
					return;
				}
				if (this.btn2_url.indexOf('close') != -1) {
					this.$emit('cancelFunc');
				} else {
					uni.navigateTo({
						url: this.btn2_url
					});
				}
			} else {
				// #ifdef H5
				if (this.btn2_url.indexOf('http') != -1) {
					window.location.href(this.btn2_url);
				} else {
					this.$emit('cancelFunc');
				}
				// #endif
			}

			// this.$emit("certain")
		},
		toRegister(e) {
			var type = e.currentTarget.dataset.type;
			this.$emit('cancelFunc');
		},
		getuserinfos_(e) {
			let that = this;
			uni.getUserProfile({
				desc: 'Wexin',
				success: (res) => {
					if (res.userInfo) {
						uni.setStorage({
							key: 'userinfo',
							data: res.userInfo,
							success() {
								that.noAuth = true;
							}
						});

						that.$emit('showModal');
						API.user.getVid();
					} else {
						uni.showModal({
							title: '拒绝授权会影响功能使用',
							icon: 'none',
							showCancel: false
						});
						that.$emit('showModal');
					}
					// console.log(res)
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},
		getuserinfo_(e) {
			var that = this;
			if (e.detail.userInfo) {
				uni.setStorage({
					key: 'userinfo',
					data: e.detail.userInfo,
					success() {
						that.noAuth = true;
					}
				});
			}
		},

		getPhoneNumberHandler(e) {
			const info = uni.getStorageSync('userinfo');
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				that.$http
					.post({
						url: '/zzj_singleSaleApi/authorizedLogin',
						data: {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							session_key: uni.getStorageSync('session_key'),
							bid: uni.getStorageSync('bid'),
							openid: that.openid,
							nickName: info.nickName, //暱稱
							headimg: info.avatarUrl, //頭像
							share_v_id: uni.getStorageSync('share_v_id'), //分享id
							city: info.city,
							sex: info.gender ? info.gender : info.sex, //性別
							country: info.country, //國家
							province: info.province //省份
						}
					})
					.then((res) => {
						if (res.status) {
							if (res.v_id && res.v_id != 0) {
								uni.setStorage({
									key: 'vid',
									data: res.v_id
								});
							}
							if (res.coupon && res.coupon.status == 1) {
								// 1 有券  0 无券
								that.couponArry = true;
								that.CouponShow = res.coupon.data;
							}
							/**
							 * 重新走一次获取用户其他信息：如是否有购买权限
							 * **/
							API.user.getVid();
							that.cancel(); // 关闭弹窗
						}
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					});
			}
		}
		// getPhoneNumberHandler(e) {
		// 	const info = uni.getStorageSync('userinfo');
		// 	console.log(info,'1')
		// 	let vid = uni.getStorageSync('vid')
		// 	if(!that.openid || !that.userinfo ||!vid){
		// 		API.user.getOpenid().then(openid=>{
		// 			that.openid = openid
		// 			// #ifdef MP
		// 			that.authorizedLogin(e)
		// 			// #endif
		// 		})
		// 	}
		// }
	}
};
</script>

<style scoped lang="scss">
/* 弹窗样式 */
.masks {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
}

.model {
	position: fixed;
	width: 654rpx;
	/* height: 320rpx; */
	left: 50%;
	top: 50%;
	border-radius: 32rpx;
	transform: translate(-50%, -50%);
	background: white;
	overflow: hidden;
	z-index: 999;
}

.titleTip {
	font-size: 36rpx;
	height: 111rpx;
	line-height: 160rpx;
	font-weight: bold;
	text-align: center;
}

.msgTip {
	font-size: 28rpx;
	color: #999999;
	text-align: center;
	padding: 30rpx 66rpx;
}

.btns {
	display: flex;
	justify-content: center;
	padding: 50rpx;
}

.btn-cancel {
	width: 260rpx;
	font-size: 30rpx;
	text-align: center;
	color: #969696;
	border: 1px solid #afafaf;
	border-radius: 68rpx;
	line-height: 68rpx;
	background: none;
	margin: 0 10rpx;
}

.btn-yes {
	width: 260rpx;
	font-size: 30rpx;
	color: white;
	text-align: center;
	border-radius: 68rpx;
	line-height: 68rpx;
	margin: 0 10rpx;
}

.logo {
	display: block;
	width: 222rpx;
	padding-top: 40rpx;
	margin: 0 auto;

	image {
		width: 100%;
	}
}

.mask {
	display: flex;
	align-items: center;
	justify-content: center;

	.model {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 600rpx;
		text-align: center;
		overflow: hidden;
		padding-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 40rpx;
			color: #333333;
		}

		.info {
			font-size: 28rpx;
			padding: 20rpx 40rpx 40rpx;
			color: #666666;
		}

		.btns {
			.cancel {
				flex: 1;
				line-height: 88rpx;
				color: #999999;
				border-top: 1px solid #eeeeee;
			}

			.certain {
				flex: 1;
				line-height: 88rpx;
				background-color: #f8814e;
				color: white;
			}
		}
	}
}
</style>
